<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts可视化</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    
    <!-- 时间__头部 -->
    <header>
        <h1>echart数据可视化</h1>
        <div class="time"></div>
    </header>

    <!-- 主题内容 -->
    <div class="mainbox">
        <div class="column">
          <!-- 柱形图 -->
          <div class="panel bar">
            <h2>柱形图--就业行业</h2>
            <div class="chart"></div>
            <div class="panel_footer"></div>
          </div>

          <!-- 折线图 -->
          <div class="panel line">
            <h2>折线图--人员变化 <a href="#">2020</a><a href="#">2021</a> </h2>
            <div class="chart"></div>
            <div class="panel_footer"></div>
          </div>

          <!-- 饼图 -->
          <div class="panel pie">
            <h2>饼图__播放数据</h2>
            <div class="chart"></div>
            <div class="panel_footer"></div>
          </div>
        </div>
        <div class="column">
          <!-- 顶部数字 -->
          <div class="no">
            <div class="no_header">
              <div class="num">163546</div>
              <div class="num">100000</div>
            </div>
            <div class="no_bottom">
              <div class="text">前端需求人数</div>
              <div class="text">市场供应人数</div>
            </div>
          </div>
          <div class="map">
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
            <div class="chart"></div>
          </div>

        </div>
        <div class="column">
          <!-- 柱形图 -->
          <div class="panel barTwo">
            <h2>横向柱形图--前端学习</h2>
            <div class="chart"></div>
            <div class="panel_footer"></div>
          </div>
          <!-- 折线图 -->
          <div class="panel lineTwo">
            <h2>折线图--</h2>
            <div class="chart"></div>
            <div class="panel_footer"></div>
          </div> 
          <!-- 饼图 -->
          <div class="panel pieTwo">
            <h2>饼图--地区分布--南丁格尔玫瑰图</h2>
            <div class="chart"></div>
            <div class="panel_footer"></div>
          </div>
        </div>
    </div>
 

<script src="./js/flex.js"></script>
<!-- 采用本地资源 -->
  <!-- <script src="./js/echarts.min.js"></script>
  <script src="./js/jquery.js"></script> -->
<!-- 采用CDN引入资源 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-rc.1/echarts.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/china.js"></script>
<script>
 // 制作完成的时间戳：1608448861000
//  接下来要去实习了，希望今后日子可以好过点，安安稳稳快快乐乐的。
      
    function disposeTime(oldtime){
      var date1 = new Date(oldtime)
      var s2= Date.parse(new Date());
      var s1 = date1.getTime()
      var total = (s2 - s1)/1000;
      var day = parseInt(total / (246060));//计算整数天数
      var afterDay = total - day*24*60*60;//取得算出来天数后剩余的秒数
			var hour = parseInt(afterDay/(60*60));//计算整数小时百数
			
			var afterHour = total - day*24*60*60 - hour*60*60;//取得算出小时数后剩余的秒数
			var min = parseInt(afterHour/60);//计算整数分
			
			var afterMin = total - day*24*60*60 - hour*60*60 - min*60;//取得算出分后度剩余的秒数
			
			if(day){
				return  day + "天"+hour + "小时"+min + "分钟"+afterMin + "秒钟"
			}
			if(hour){
				return  hour + "小时"+min + "分钟"+afterMin + "秒钟"
			}
			if(min){
				return  min + "分钟"+afterMin + "秒钟"
			}
			if(afterMin){
				return  afterMin + "秒"
			}
    }

    var t = null;
    t = setTimeout(time, 1000); 
    function time() {
      clearTimeout(t); //清除定时器
      let runnTime = disposeTime('2020-12-20 15:25:00')
      document.querySelector(".time").innerHTML = `当前网站于2020-12-20，15：25分完成。距当完成时期已运行${runnTime}`;
      t = setTimeout(time, 1000); //设定定时器，循环运行
    }


</script>
</body>
</html>